<!--
 * @Author: your name
 * @Date: 2021-01-18 10:23:05
 * @LastEditTime: 2021-02-24 15:43:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\manufacturing\index.vue
-->
<template>
<div class="w1200auto" id="lens_wrapper">
    <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem" />
    <div class="lens_banner relative">
        <img :src="require('@/assets/image/manufacturing/manufacturing_1.png')" alt="" />
    </div>
    <div class="lens_nav mb80">
        <div class="lens_nav_items pt30 pb20">
            <ul class="nav_item s7">
                <li
                v-for="(nav, index) of navMenu"
                :key="'nav' + index"
                :class="{nav_active: currentIndex === index }"
                @click="switchTap(nav, index)"
                class="block size16 p5 text_c pb10 nav_item_link pointer">{{$t(nav.name)}}</li>
                <!-- <li class="" data-name="material"><a class="block size16 p5 text_c pb10 nav_item_link pointer">{{$t('Frame material')}}</a></li>
                <li class="" data-name="production"><a class="block size16 p5 text_c pb10 nav_item_link pointer">{{$t('Frames production')}}</a></li>
                <li class="" data-name="assembly"><a class="block size16 p5 text_c pb10 nav_item_link pointer">{{$t('Lenses assembly')}}</a></li>
                <li class="" data-name="cotrol"><a class="block size16 p5 text_c pb10 nav_item_link pointer">{{$t('Quality Cotrol')}}</a></li> -->
            </ul>
        </div>
    </div>
    <div class="manufacturing">
        <div class="manufacturing_design mb100 manufacturing_flex" id="design">
            <h3 class="s12 size30 b text_c mb20 lh15">{{$t("Frame Design")}}</h3>
            <p class="s12 size18 b text_c mb10 lh15">{{$t("First of all, our design team will combine today's fashion trends to design divisions,")}}</p>
            <p class="s12 size18 b text_c mb10 lh15">{{$t("form the prototype of the framework through CAD software,")}}</p>
            <p class="s12 size18 b text_c mb10 lh15">{{$t("and then match and combine a variety of raw material color samples to obtain inspiration,")}}</p>
            <p class="s12 size18 b text_c mb50 lh15">{{$t("and conduct initial design to obtain product prototypes.")}}</p>
            <div class=" s12 manufacturing_design_img text_c">
                <img :src="require('@/assets/image/manufacturing/manufacturing_17.png')" alt="">
            </div>
        </div>
        <div class="manufacturing_material" id="material">
            <h3 class="s12 size30 b text_c mb20 lh15">{{$t("Frame material")}}</h3>
            <p class="s12 size18 b text_c mb10 lh15">{{$t("Our frame is made of high-quality acetate fiber material,")}}</p>
            <p class="s12 size18 b text_c mb10 lh15">{{$t("which is environmentally friendly, corrosion resistant, low shrinkage and not easy to deform.")}}</p>
            <p class="s12 size18 b text_c mb50 lh15">{{$t("Good quality raw materials can produce good products.")}}</p>
            <div class="manufacturing_flex">
                <div class="s6 text_c mb30">
                    <img class="mb30" :src="require('@/assets/image/manufacturing/manufacturing_2.png')" alt="">
                    <p class="size16 b mb0 lh15">{{$t("1.The raw material of the frame is composed of transparent acetate fiber")}}</p>
                </div>
                <div class="s6 text_c mb30">
                    <img class="mb30" :src="require('@/assets/image/manufacturing/manufacturing_3.png')" alt="">
                    <p class="size16 b mb0 lh15">{{$t("2.Match these transparent particles with a variety of colorful colors")}}</p>
                </div>
                <div class="s6 text_c mb30">
                    <img class="mb30" :src="require('@/assets/image/manufacturing/manufacturing_4.png')" alt="">
                    <p class="size16 b mb0 lh15">{{$t("3.Put the color particles into the mold according")}}</p>
                    <p class="size16 b mb0 lh15">{{$t("to the proportion for thermoforming")}}</p>
                </div>
                <div class="s6 text_c mb30">
                    <img class="mb30" :src="require('@/assets/image/manufacturing/manufacturing_5.png')" alt="">
                    <p class="size16 b mb0 lh15">{{$t("4.After 24 hours, these colored particles combined into a swatch")}}</p>
                </div>
            </div>
        </div>
        <div class="manufacturing_production" id="production">
            <h3 class="s12 size30 b text_c mb20 lh15">{{$t("Frame production")}}</h3>
            <p class="s12 size18 b text_c mb10 lh15">{{$t("Relying on advanced machinery and equipment,")}}</p>
            <p class="s12 size18 b text_c mb50 lh15">{{$t("combined with the engineer’s manual skills to produce high-quality spectacle frames")}}</p>
            <div class="manufacturing_flex">
                <div class="s6 text_c">
                    <img  :src="require('@/assets/image/manufacturing/manufacturing_6.png')" alt="">
                    <div class="flex manufacturing_production_txt ptb10 h120">
                        <p class="size16 b mb0 lh15">{{$t("1. Cut the raw material block b size16 p5 text_c pb10 nav_item_link into the design shape")}}</p>
                        <p class="size16 b mb0 lh15">{{$t("of the mirror frame through the CNC machine tool.")}}</p>
                        <p class="size16 b mb0 lh15">{{$t("transforms sheets of strong, lightweight, flexible,")}}</p>
                        <p class="size16 b mb0 lh15">{{$t("and hypoallergenic acetate into fashion-forward frames.")}}</p>
                    </div>
                </div>
                <div class="s6 text_c">
                    <img  :src="require('@/assets/image/manufacturing/manufacturing_7.png')" alt="">
                    <div class="flex manufacturing_production_txt ptb10 h120">
                        <p class="size16 b mb0 lh15">{{$t("2.The rough cut mirror frame is polished smoothly")}}</p>
                        <p class="size16 b mb0 lh15">{{$t("in a polishing machine by stirring and rolling with sawdust.")}}</p>
                    </div>
                </div>
                <div class="s6 text_c">
                    <img  :src="require('@/assets/image/manufacturing/manufacturing_6.png')" alt="">
                    <div class="flex manufacturing_production_txt ptb10 h120">
                        <p class="size16 b mb0 lh15">{{$t("3.The metal spring hinge is placed in the temple")}}</p>
                        <p class="size16 b mb0 lh15">{{$t("to connect the frame and fix it and adjust it")}}</p>
                    </div>
                </div>
                <div class="s6 text_c">
                    <img  :src="require('@/assets/image/manufacturing/manufacturing_7.png')" alt="">
                    <div class="flex manufacturing_production_txt ptb10 h120">
                        <p class="size16 b mb0 lh15">{{$t("4.Hinge heads are embedded at both ends")}}</p>
                        <p class="size16 b mb0 lh15">{{$t("of the frame for connecting temple")}}</p>
                    </div>
                </div>
                <div class="s6 text_c">
                    <img  :src="require('@/assets/image/manufacturing/manufacturing_8.png')" alt="">
                    <div class="flex manufacturing_production_txt ptb10 h120">
                        <p class="size16 b mb0 lh15">{{$t("5.Frame assembly")}}</p>
                    </div>
                </div>
                <div class="s6 text_c">
                    <img  :src="require('@/assets/image/manufacturing/manufacturing_9.png')" alt="">
                    <div class="flex manufacturing_production_txt ptb10 h120">
                        <p class="size16 b mb0 lh15">{{$t("6.Correct and check the frame")}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="manufacturing_assembly mb100" id="assembly">
            <h3 class="s12 size30 b text_c mb20 lh15">{{$t("Lenses assembly")}}</h3>
            <p class="s12 size18 b text_c mb50 lh15">{{$t("Use an advanced edger to cut and assemble the lens onto the frame")}}</p>
            <div class="manufacturing_flex">
                <div class="s6 text_c">
                    <img  :src="require('@/assets/image/manufacturing/manufacturing_10.png')" alt="">
                    <div class="flex manufacturing_assembly_txt ptb10 h120">
                        <p class="size16 b mb0 lh15">{{$t("1.Prepare the frame and lens according to")}}</p>
                        <p class="size16 b mb0 lh15">{{$t(" the customer's order details.")}}</p>
                    </div>
                </div>
                <div class="s6 text_c">
                    <img  :src="require('@/assets/image/manufacturing/manufacturing_7.png')" alt="">
                    <div class="flex manufacturing_assembly_txt ptb10 h120">
                        <p class="size16 b mb0 lh15">{{$t("2.Grind the lens into a frame shape using a CNC cutting")}}</p>
                        <p class="size16 b mb0 lh15">{{$t("machine The glasses undergo final prescription inspection.")}}</p>
                    </div>
                </div>
                <div class="s6 text_c">
                    <img  :src="require('@/assets/image/manufacturing/manufacturing_8.png')" alt="">
                    <div class="flex manufacturing_assembly_txt ptb10 h120">
                        <p class="size16 b mb0 lh15">{{$t("3.Put the processed lens into the frame")}}</p>
                    </div>
                </div>
                <div class="s6 text_c">
                    <img  :src="require('@/assets/image/manufacturing/manufacturing_12.png')" alt="">
                    <div class="flex manufacturing_assembly_txt ptb10 h120">
                        <p class="size16 b mb0 lh15">{{$t("4.Assemble the lens to complete the prescription inspection")}}</p>
                    </div>
                </div>
                <p class="s12 s12 size18 b text_c mb10 lh15">{{$t("A pair of perfect glasses show up in front of you.")}}</p>
                <p class="s12 s12 size18 b text_c mb10 lh15">{{$t("After each pair of glasses is manufactured and passed through the stringent quality control process, ")}}</p>
                <p class="s12 s12 size18 b text_c mb50 lh15">{{$t("it is carefully packed into a  eyeglasses case with a complimentary lens cloth.")}}</p>
                <div class="s12 manufacturing_design_img text_c">
                    <img :src="require('@/assets/image/manufacturing/manufacturing_13.png')" alt="">
                </div>
            </div>
        </div>
        <div class="manufacturing_cotrol mb100 manufacturing_flex" id="cotrol">
            <h3 class="s12 size30 b text_c mb20 lh15">{{$t("Quality Cotrol")}}</h3>
            <p class="s12 size18 b text_c mb10 lh15">{{$t("Carry out the final inspection before shipping per order.")}}</p>
            <p class="s12 size18 b text_c mb10 lh15">{{$t("In each step of the manufacturing process, the product quality will be strictly checked,")}}</p>
            <p class="s12 size18 b text_c mb10 lh15">{{$t("including the frame, lens and prescription. ")}}</p>
            <p class="s12 size18 b text_c mb10 lh15">{{$t("The final QC checks for ensures that each eyeglass prescription matches its original order before releasing it for shipping.")}}</p>
            <p class="s12 size18 b text_c mb50 lh15">{{$t("to ensure that each customer receives a satisfactory and perfect product.")}}</p>
            <div class="s12 manufacturing_design_img text_c">
                <img :src="require('@/assets/image/manufacturing/manufacturing_14.png')" alt="">
            </div>
        </div>
    </div>
    <div class="add_lens">
        <h2 class="size24 b text_c mb50">{{$t("Find your pair")}}</h2>
        <div class="add_lens_eye">
            <div class="s6">
                <div class="mb10"><img :src="require('@/assets/image/manufacturing/manufacturing_16.jpg')" alt="" /></div>
                <nuxt-link class="size16 b block text_c lh15 gradients pointer" :to="{name: 'eyeglasses'}">{{$t("Shop Women")}}</nuxt-link>
            </div>
            <div class="s6">
                <div class="mb10"><img :src="require('@/assets/image/manufacturing/manufacturing_15.jpg')" alt="" /></div>
                <nuxt-link class="size16 b block text_c lh15 gradients pointer" :to="{name: 'sunglasses'}">{{$t("Shop Men")}}</nuxt-link>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import BreadCrumb from "~/components/common/Breadcrumb";
import { spliteParams } from '~/utils/Utils';
import { scrollToElem } from '@/utils/Utils'
export default {
    async asyncData({ req, params, query, route, store}) {
        // 获取路由层级
        let arr = await spliteParams(route.fullPath);
        const navMenu = [
            {
                name: 'Product design',
                type: 'design'
            },
            {
                name: 'Frame material',
                type: 'material'
            },
            {
                name: 'Frames production',
                type: 'production'
            },
            {
                name: 'Lenses assembly',
                type: 'assembly'
            },
            {
                name: 'Quality Cotrol',
                type: 'cotrol'
            }                     
        ]
        return {
            navMenu: navMenu,
            currentIndex: 0,
            breadcrumbTtem: arr || []
        }
    },
    components: {
      BreadCrumb
    },
    watch: {
      $route(to, from) {
        if(to.fullPath !== from.fullPath) {
          this.breadcrumbTtem = spliteParams(to.fullPath);
        }
      }
    },
    methods: {
        switchTap(nav, index) {
            this.currentIndex = index;
            scrollToElem('#' + nav.type, 1500, -90)
        }
    }
}
</script>

<style lang="scss" scoped>
    @import "~/assets/scss/index.scss";
    .h120{min-height: 120px;}
    .manufacturing_assembly_txt,
    .manufacturing_production_txt {
        flex-direction: column;
        justify-content: center;
    }
    .manufacturing_flex {
        @include flex();
        flex-wrap: wrap;
    }
    .nav_item{
        @include flex-center(space-around);
    }
    .nav_active,
    .lens_nav_items {
        border-bottom: 2px solid $c333;
    }
    .nav_active {
        font-weight: bold;
    }
    .add_lens_eye{
        @include flex();
    }
</style>